<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <title>Theme Documentation - Extended Shortcodes - KeepIt</title><meta name="Description" content="KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo."><meta property="og:title" content="Theme Documentation - Extended Shortcodes" />
<meta property="og:description" content="KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/en/theme-documentation-extended-shortcodes/" /><meta property="og:image" content="https://example.com/en/theme-documentation-extended-shortcodes/featured-image.jpg"/><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2020-03-03T16:29:41+08:00" />
<meta property="article:modified_time" content="2020-03-03T16:29:41+08:00" /><meta property="og:site_name" content="KeepIt" />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://example.com/en/theme-documentation-extended-shortcodes/featured-image.jpg"/>
<meta name="twitter:title" content="Theme Documentation - Extended Shortcodes"/>
<meta name="twitter:description" content="KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo."/>
<meta name="twitter:site" content="@xxxx"/>
<meta name="application-name" content="KeepIt">
<meta name="apple-mobile-web-app-title" content="KeepIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://example.com/en/theme-documentation-extended-shortcodes/" /><link rel="prev" href="https://example.com/en/basic-markdown-syntax/" /><link rel="next" href="https://example.com/en/theme-documentation-built-in-shortcodes/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "Theme Documentation - Extended Shortcodes",
        "inLanguage": "en",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/example.com\/en\/theme-documentation-extended-shortcodes\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/example.com\/en\/theme-documentation-extended-shortcodes\/featured-image.jpg",
                            "width":  1280 ,
                            "height":  720 
                        }],"genre": "posts","keywords": "shortcodes","wordcount":  1050 ,
        "url": "https:\/\/example.com\/en\/theme-documentation-extended-shortcodes\/","datePublished": "2020-03-03T16:29:41+08:00","dateModified": "2020-03-03T16:29:41+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/example.com\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "Dillon"
            },"description": "KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo."
    }
    </script></head>
    <body data-header-desktop="fixed" data-header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/en/" title="KeepIt"><span class="header-title-pre"><i class='far fa-kiss-wink-heart fa-fw' aria-hidden='true'></i></span>KeepIt</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/en/posts/"> Posts </a><a class="menu-item" href="/en/tags/"> Tags </a><a class="menu-item" href="/en/categories/"> Categories </a><a class="menu-item" href="/en/categories/documentation/"> Docs </a><a class="menu-item" href="/en/about/"> About </a><a class="menu-item" href="https://github.com/Fastbyte01/KeepIt" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw' aria-hidden='true'></i>  </a><span class="menu-item delimiter"></span><a href="javascript:void(0);" class="menu-item language" title="Select Language">English<i class="fas fa-chevron-right fa-fw" aria-hidden="true"></i>
                        <select class="language-select" id="language-select-desktop" onchange="location = this.value;"><option value="/en/theme-documentation-extended-shortcodes/" selected>English</option><option value="/theme-documentation-extended-shortcodes/">简体中文</option></select>
                    </a><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="Search titles or contents..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="Search">
                            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="Clear">
                            <i class="fas fa-times-circle fa-fw" aria-hidden="true"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin" aria-hidden="true"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                    <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/en/" title="KeepIt"><span class="header-title-pre"><i class='far fa-kiss-wink-heart fa-fw' aria-hidden='true'></i></span>KeepIt</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="Search titles or contents..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="Search">
                            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="Clear">
                            <i class="fas fa-times-circle fa-fw" aria-hidden="true"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin" aria-hidden="true"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        Cancel
                    </a>
                </div><a class="menu-item" href="/en/posts/" title="">Posts</a><a class="menu-item" href="/en/tags/" title="">Tags</a><a class="menu-item" href="/en/categories/" title="">Categories</a><a class="menu-item" href="/en/categories/documentation/" title="">Docs</a><a class="menu-item" href="/en/about/" title="">About</a><a class="menu-item" href="https://github.com/Fastbyte01/KeepIt" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw' aria-hidden='true'></i></a><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="Select Language">English<i class="fas fa-chevron-right fa-fw" aria-hidden="true"></i>
                    <select class="language-select" onchange="location = this.value;"><option value="/en/theme-documentation-extended-shortcodes/" selected>English</option><option value="/theme-documentation-extended-shortcodes/">简体中文</option></select>
                </a></div>
    </div>
</header><div class="search-dropdown desktop">
        <div id="search-dropdown-desktop"></div>
    </div>
    <div class="search-dropdown mobile">
        <div id="search-dropdown-mobile"></div>
    </div><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animate__animated animate__flipInX">Theme Documentation - Extended Shortcodes</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://dillonzq.com" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw" aria-hidden="true"></i>Dillon</a>
</span>&nbsp;<span class="post-category">included in <a href="/en/categories/documentation/"><i class="far fa-folder fa-fw" aria-hidden="true"></i>Documentation</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw" aria-hidden="true"></i>&nbsp;<time datetime="2020-03-03">2020-03-03</time>&nbsp;<i class="fas fa-pencil-alt fa-fw" aria-hidden="true"></i>&nbsp;1050 words&nbsp;
                <i class="far fa-clock fa-fw" aria-hidden="true"></i>&nbsp;5 minutes&nbsp;<span id="/en/theme-documentation-extended-shortcodes/" class="leancloud_visitors" data-flag-title="Theme Documentation - Extended Shortcodes">
                        <i class="far fa-eye fa-fw" aria-hidden="true"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;views
                    </span>&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="/en/theme-documentation-extended-shortcodes/featured-image.jpg"
        data-srcset="/en/theme-documentation-extended-shortcodes/featured-image.jpg, /en/theme-documentation-extended-shortcodes/featured-image.jpg 1.5x, /en/theme-documentation-extended-shortcodes/featured-image.jpg 2x"
        data-sizes="auto"
        alt="/en/theme-documentation-extended-shortcodes/featured-image.jpg"
        title="KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo." /></div><div class="details toc" id="toc-static"  data-kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right" aria-hidden="true"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#1-style">1 style</a></li>
    <li><a href="#2-link">2 link</a></li>
    <li><a href="#image">3 image</a></li>
    <li><a href="#4-admonition">4 admonition</a></li>
    <li><a href="#5-mermaid">5 mermaid</a></li>
    <li><a href="#6-echarts">6 echarts</a></li>
    <li><a href="#7-mapbox">7 mapbox</a></li>
    <li><a href="#8-music">8 music</a></li>
    <li><a href="#9-bilibili">9 bilibili</a></li>
    <li><a href="#10-typeit">10 typeit</a></li>
    <li><a href="#11-script">11 script</a></li>
    <li><a href="#12-raw">12 raw</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><p><strong>KeepIt</strong> theme provides multiple shortcodes on top of built-in ones in Hugo.</p>
<h2 id="1-style">1 style</h2>
<a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.en.min.svg"
        data-srcset="/svg/version/0.2.0-changed.en.min.svg, /svg/version/0.2.0-changed.en.min.svg 1.5x, /svg/version/0.2.0-changed.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt CHANGED | 0.2.0"
        title="KeepIt CHANGED | 0.2.0" /></a>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw" aria-hidden="true"></i>Note<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">Hugo <strong>extended</strong> version is necessary for <code>style</code> shortcode.</div>
        </div>
    </div>
<p><code>style</code> is a shortcode to insert custom style in your post.</p>
<p>The <code>style</code> shortcode has two positional parameters.</p>
<p>The <strong>first</strong> one is the custom style content,
which supports nesting syntax in <a href="https://sass-lang.com/documentation/style-rules/declarations#nesting" target="_blank" rel="noopener noreffer"><i class="fab fa-sass fa-fw" aria-hidden="true"></i>&nbsp;SASS</a>

and <code>&amp;</code> referring to this parent HTML element.</p>
<p>And the <strong>second</strong> one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is <code>div</code>.</p>
<p>Example <code>style</code> input:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">style</span> <span class="err">&#34;</span><span class="na">text-align:right</span><span class="err">;</span> <span class="na">strong</span><span class="err">{</span><span class="na">color:</span><span class="err">#</span><span class="na">00b1ff</span><span class="err">;}&#34;</span> <span class="p">&gt;</span><span class="err">}}</span>
</span></span><span class="line"><span class="cl"><span class="nt">This</span> <span class="nt">is</span> <span class="nt">a</span> <span class="gs">**right-aligned**</span> <span class="nt">paragraph</span><span class="o">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{</span><span class="err">{</span><span class="p">&lt;</span> <span class="p">/</span><span class="nt">style</span> <span class="p">&gt;</span>}}
</span></span></code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<div id="id-1">This is a <strong>right-aligned</strong> paragraph.</div>
<h2 id="2-link">2 link</h2>
<a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt NEW | 0.2.0"
        title="KeepIt NEW | 0.2.0" /></a>
<p><code>link</code> shortcode is an alternative to <a href="../basic-markdown-syntax#links" rel="">Markdown link syntax</a>
. <code>link</code> shortcode can provide some other features and can be used in code blocks.</p>
<p><a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.10-new.en.min.svg"
        data-srcset="/svg/version/0.2.10-new.en.min.svg, /svg/version/0.2.10-new.en.min.svg 1.5x, /svg/version/0.2.10-new.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt NEW | 0.2.10"
        title="KeepIt NEW | 0.2.10" /></a> The complete usage of <a href="../theme-documentation-content#contents-organization" rel="">local resource references</a>
 is supported.</p>
<p>The <code>link</code> shortcode has the following named parameters:</p>
<ul>
<li>
<p><strong>href</strong> <em>[required]</em> (<strong>first</strong> positional parameter)</p>
<p>Destination of the link.</p>
</li>
<li>
<p><strong>content</strong> <em>[optional]</em> (<strong>second</strong> positional parameter)</p>
<p>Content of the link, default value is the value of <strong>href</strong> parameter.</p>
<p><em>Markdown or HTML format is supported.</em></p>
</li>
<li>
<p><strong>title</strong> <em>[optional]</em> (<strong>third</strong> positional parameter)</p>
<p><code>title</code> attribute of the HTML <code>a</code> tag, which will be shown when hovering on the link.</p>
</li>
<li>
<p><strong>class</strong> <em>[optional]</em></p>
<p><code>class</code> attribute of the HTML <code>a</code> tag.</p>
</li>
<li>
<p><strong>rel</strong> <em>[optional]</em></p>
<p>Additional <code>rel</code> attributes of the HTML <code>a</code> tag.</p>
</li>
</ul>
<p>Example <code>link</code> input:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="err">&#34;</span><span class="na">https:</span><span class="err">//</span><span class="na">assemble</span><span class="err">.</span><span class="na">io</span><span class="err">&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">Or
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://assemble.io&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="err">&#34;</span><span class="na">mailto:contact</span><span class="err">@</span><span class="na">revolunet</span><span class="err">.</span><span class="na">com</span><span class="err">&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">Or
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;mailto:contact@revolunet.com&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="err">&#34;</span><span class="na">https:</span><span class="err">//</span><span class="na">assemble</span><span class="err">.</span><span class="na">io</span><span class="err">&#34;</span> <span class="na">Assemble</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">Or
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://assemble.io&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">Assemble</span> <span class="p">&gt;</span>}}
</span></span></code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<ul>
<li><a href="https://assemble.io" target="_blank" rel="noopener noreffer">https://assemble.io</a>
</li>
<li><a href="mailto:contact@revolunet.com" rel="">mailto:contact@revolunet.com</a>
</li>
<li><a href="https://assemble.io" target="_blank" rel="noopener noreffer">Assemble</a>
</li>
</ul>
<p>Example <code>link</code> input with a title:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="err">&#34;</span><span class="na">https:</span><span class="err">//</span><span class="na">github</span><span class="err">.</span><span class="na">com</span><span class="err">/</span><span class="na">upstage</span><span class="err">/&#34;</span> <span class="na">Upstage</span> <span class="err">&#34;</span><span class="na">Visit</span> <span class="na">Upstage</span><span class="err">!&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">Or
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://github.com/upstage/&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">Upstage</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;Visit Upstage!&#34;</span> <span class="p">&gt;</span>}}
</span></span></code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this (hover over the link, there should be a tooltip):</p>
<a href="https://github.com/upstage/" title="Visit Upstage!" target="_blank" rel="noopener noreffer">Upstage</a>

<h2 id="image">3 image</h2>
<a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.en.min.svg"
        data-srcset="/svg/version/0.2.0-changed.en.min.svg, /svg/version/0.2.0-changed.en.min.svg 1.5x, /svg/version/0.2.0-changed.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt CHANGED | 0.2.0"
        title="KeepIt CHANGED | 0.2.0" /></a>
<p><code>image</code> shortcode is an alternative to <a href="../theme-documentation-built-in-shortcodes#figure" rel=""><code>figure</code> shortcode</a>
. <code>image</code> shortcode can take full advantage of the dependent libraries of <a href="https://github.com/aFarkas/lazysizes" target="_blank" rel="noopener noreffer">lazysizes</a>
 and <a href="https://github.com/sachinchoolur/lightgallery" target="_blank" rel="noopener noreffer">lightGallery</a>
.</p>
<p><a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.10-new.en.min.svg"
        data-srcset="/svg/version/0.2.10-new.en.min.svg, /svg/version/0.2.10-new.en.min.svg 1.5x, /svg/version/0.2.10-new.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt NEW | 0.2.10"
        title="KeepIt NEW | 0.2.10" /></a> The complete usage of <a href="../theme-documentation-content#contents-organization" rel="">local resource references</a>
 is supported.</p>
<p>The <code>image</code> shortcode has the following named parameters:</p>
<ul>
<li>
<p><strong>src</strong> <em>[required]</em> (<strong>first</strong> positional parameter)</p>
<p>URL of the image to be displayed.</p>
</li>
<li>
<p><strong>alt</strong> <em>[optional]</em> (<strong>second</strong> positional parameter)</p>
<p>Alternate text for the image if the image cannot be displayed, default value is the value of <strong>src</strong> parameter.</p>
<p><em>Markdown or HTML format is supported.</em></p>
</li>
<li>
<p><strong>caption</strong> <em>[optional]</em> (<strong>third</strong> positional parameter)</p>
<p>Image caption.</p>
<p><em>Markdown or HTML format is supported.</em></p>
</li>
<li>
<p><strong>title</strong> <em>[optional]</em></p>
<p>Image title that will be shown when hovering on the image.</p>
</li>
<li>
<p><strong>class</strong> <em>[optional]</em></p>
<p><code>class</code> attribute of the HTML <code>figure</code> tag.</p>
</li>
<li>
<p><strong>src_s</strong> <em>[optional]</em></p>
<p>URL of the image thumbnail, used for lightgallery, default value is the value of <strong>src</strong> parameter.</p>
</li>
<li>
<p><strong>src_l</strong> <em>[optional]</em></p>
<p>URL of the HD image, used for lightgallery, default value is the value of <strong>src</strong> parameter.</p>
</li>
<li>
<p><strong>height</strong> <em>[optional]</em></p>
<p><code>height</code> attribute of the image.</p>
</li>
<li>
<p><strong>width</strong> <em>[optional]</em></p>
<p><code>width</code> attribute of the image.</p>
</li>
<li>
<p><strong>linked</strong> <em>[optional]</em></p>
<p>Whether the image needs to be hyperlinked, default value is <code>true</code>.</p>
</li>
<li>
<p><strong>rel</strong> <em>[optional]</em></p>
<p>Additional <code>rel</code> attributes of the HTML <code>a</code> tag, if <strong>linked</strong> parameter is set to <code>true</code>.</p>
</li>
</ul>
<p>Example <code>image</code> input:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">image</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;/images/lighthouse.jpg&#34;</span> <span class="na">caption</span><span class="o">=</span><span class="s">&#34;Lighthouse (`image`)&#34;</span> <span class="na">src_s</span><span class="o">=</span><span class="s">&#34;/images/lighthouse-small.jpg&#34;</span> <span class="na">src_l</span><span class="o">=</span><span class="s">&#34;/images/lighthouse-large.jpg&#34;</span> <span class="p">&gt;</span>}}
</span></span></code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<figure><a class="lightgallery" href="/images/lighthouse-large.jpg" title="/images/lighthouse.jpg" data-thumbnail="/images/lighthouse-small.jpg" data-sub-html="<h2>Lighthouse (image)</h2>">
        <img
            class="lazyload"
            src="/svg/loading.min.svg"
            data-src="/images/lighthouse.jpg"
            data-srcset="/images/lighthouse-small.jpg, /images/lighthouse.jpg 1.5x, /images/lighthouse-large.jpg 2x"
            data-sizes="auto"
            alt="/images/lighthouse.jpg" width="1972" height="1315" />
    </a><figcaption class="image-caption">Lighthouse (<code>image</code>)</figcaption>
    </figure>
<h2 id="4-admonition">4 admonition</h2>
<p>The <code>admonition</code> shortcode supports <strong>12</strong> types of banners to help you put notice in your page.</p>
<p><em>Markdown or HTML format in the content is supported.</em></p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw" aria-hidden="true"></i>Note<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>note</strong> banner</div>
        </div>
    </div>
<div class="details admonition abstract open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-list-ul fa-fw" aria-hidden="true"></i>Abstract<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">An <strong>abstract</strong> banner</div>
        </div>
    </div>
<div class="details admonition info open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-info-circle fa-fw" aria-hidden="true"></i>Info<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>info</strong> banner</div>
        </div>
    </div>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw" aria-hidden="true"></i>Tip<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>tip</strong> banner</div>
        </div>
    </div>
<div class="details admonition success open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-check-circle fa-fw" aria-hidden="true"></i>Success<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>success</strong> banner</div>
        </div>
    </div>
<div class="details admonition question open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-question-circle fa-fw" aria-hidden="true"></i>Question<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>question</strong> banner</div>
        </div>
    </div>
<div class="details admonition warning open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-exclamation-triangle fa-fw" aria-hidden="true"></i>Warning<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>warning</strong> banner</div>
        </div>
    </div>
<div class="details admonition failure open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-times-circle fa-fw" aria-hidden="true"></i>Failure<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>failure</strong> banner</div>
        </div>
    </div>
<div class="details admonition danger open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-skull-crossbones fa-fw" aria-hidden="true"></i>Danger<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>danger</strong> banner</div>
        </div>
    </div>
<div class="details admonition bug open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-bug fa-fw" aria-hidden="true"></i>Bug<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>bug</strong> banner</div>
        </div>
    </div>
<div class="details admonition example open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-list-ol fa-fw" aria-hidden="true"></i>Example<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">An <strong>example</strong> banner</div>
        </div>
    </div>
<div class="details admonition quote open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-quote-right fa-fw" aria-hidden="true"></i>Quote<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>quote</strong> banner</div>
        </div>
    </div>
<p>The <code>admonition</code> shortcode has the following named parameters:</p>
<ul>
<li>
<p><strong>type</strong> <em>[optional]</em> (<strong>first</strong> positional parameter)</p>
<p>Type of the <code>admonition</code> banner, default value is <code>note</code>.</p>
</li>
<li>
<p><strong>title</strong> <em>[optional]</em> (<strong>second</strong> positional parameter)</p>
<p>Title of the <code>admonition</code> banner, default value is the value of <strong>type</strong> parameter.</p>
</li>
<li>
<p><strong>open</strong> <em>[optional]</em> (<strong>third</strong> positional parameter) <a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.en.min.svg"
        data-srcset="/svg/version/0.2.0-changed.en.min.svg, /svg/version/0.2.0-changed.en.min.svg 1.5x, /svg/version/0.2.0-changed.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt CHANGED | 0.2.0"
        title="KeepIt CHANGED | 0.2.0" /></a></p>
<p>Whether the content will be expandable by default, default value is <code>true</code>.</p>
</li>
</ul>
<p>Example <code>admonition</code> input:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">admonition</span> <span class="na">type</span><span class="o">=</span><span class="s">tip</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;This is a tip&#34;</span> <span class="na">open</span><span class="o">=</span><span class="s">false</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">A <span class="gs">**tip**</span> banner
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">admonition</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">Or
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">admonition</span> <span class="na">tip</span> <span class="err">&#34;</span><span class="na">This</span> <span class="na">is</span> <span class="na">a</span> <span class="na">tip</span><span class="err">&#34;</span> <span class="na">false</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">A <span class="gs">**tip**</span> banner
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">admonition</span> <span class="p">&gt;</span>}}
</span></span></code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<div class="details admonition tip">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw" aria-hidden="true"></i>This is a tip<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">A <strong>tip</strong> banner</div>
        </div>
    </div>
<h2 id="5-mermaid">5 mermaid</h2>
<p>The <code>mermaid</code> shortcode supports diagrams in Hugo with <a href="https://mermaidjs.github.io/" target="_blank" rel="noopener noreffer">Mermaid</a>
 library.</p>
<p>The full documentation is provided in <a href="../theme-documentation-mermaid-shortcode" rel="">Theme Documentation - mermaid Shortcode</a>
.</p>
<h2 id="6-echarts">6 echarts</h2>
<p>The <code>echarts</code> shortcode supports data visualization in Hugo with <a href="https://echarts.apache.org/" target="_blank" rel="noopener noreffer">ECharts</a>
 library.</p>
<p>The full documentation is provided in <a href="../theme-documentation-echarts-shortcode" rel="">Theme Documentation - echarts Shortcode</a>
.</p>
<h2 id="7-mapbox">7 mapbox</h2>
<a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt NEW | 0.2.0"
        title="KeepIt NEW | 0.2.0" /></a>
<p>The <code>mapbox</code> shortcode supports interactive maps in Hugo with <a href="https://docs.mapbox.com/mapbox-gl-js" target="_blank" rel="noopener noreffer">Mapbox GL JS</a>
 library.</p>
<p>The full documentation is provided in <a href="../theme-documentation-mapbox-shortcode" rel="">Theme Documentation - mapbox Shortcode</a>
.</p>
<h2 id="8-music">8 music</h2>
<p>The <code>music</code> shortcode embeds a responsive music player based on <a href="https://github.com/MoePlayer/APlayer" target="_blank" rel="noopener noreffer">APlayer</a>
 and <a href="https://github.com/metowolf/MetingJS" target="_blank" rel="noopener noreffer">MetingJS</a>
 library.</p>
<p>The full documentation is provided in <a href="../theme-documentation-music-shortcode" rel="">Theme Documentation - music Shortcode</a>
.</p>
<h2 id="9-bilibili">9 bilibili</h2>
<a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.en.min.svg"
        data-srcset="/svg/version/0.2.0-changed.en.min.svg, /svg/version/0.2.0-changed.en.min.svg 1.5x, /svg/version/0.2.0-changed.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt CHANGED | 0.2.0"
        title="KeepIt CHANGED | 0.2.0" /></a>
<p>The <code>bilibili</code> shortcode embeds a responsive video player for bilibili videos.</p>
<p>The full documentation is provided in <a href="../theme-documentation-bilibili-shortcode" rel="">Theme Documentation - bilibili Shortcode</a>
.</p>
<h2 id="10-typeit">10 typeit</h2>
<p>The <code>typeit</code> shortcode provides typing animation based on <a href="https://typeitjs.com/" target="_blank" rel="noopener noreffer">TypeIt</a>
 library.</p>
<p>The full documentation is provided in <a href="../theme-documentation-typeit-shortcode" rel="">Theme Documentation - typeit Shortcode</a>
.</p>
<h2 id="11-script">11 script</h2>
<a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.8" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.8-new.en.min.svg"
        data-srcset="/svg/version/0.2.8-new.en.min.svg, /svg/version/0.2.8-new.en.min.svg 1.5x, /svg/version/0.2.8-new.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt NEW | 0.2.8"
        title="KeepIt NEW | 0.2.8" /></a>
<p><code>script</code> is a shortcode to insert custom <strong><i class="fab fa-js fa-fw" aria-hidden="true"></i>&nbsp;Javascript</strong> in your post.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw" aria-hidden="true"></i>Note<i class="details-icon fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.</div>
        </div>
    </div>
<p>Example <code>script</code> input:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">script</span> <span class="p">&gt;}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hello KeepIt!&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="p">/</span><span class="nt">script</span> <span class="p">&gt;</span>}}
</span></span></code></pre></td></tr></table>
</div>
</div><p>You can see the output in the console of the developer tool.</p>

<h2 id="12-raw">12 raw</h2>
<a href="https://github.com/Fastbyte01/KeepIt/releases/tag/v0.2.11" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.11-new.en.min.svg"
        data-srcset="/svg/version/0.2.11-new.en.min.svg, /svg/version/0.2.11-new.en.min.svg 1.5x, /svg/version/0.2.11-new.en.min.svg 2x"
        data-sizes="auto"
        alt="KeepIt NEW | 0.2.11"
        title="KeepIt NEW | 0.2.11" /></a>
<p><code>raw</code> is a shortcode to insert raw <strong><i class="fab fa-html5 fa-fw" aria-hidden="true"></i>&nbsp;HTML</strong> content in your post.
This is useful when you want to include some Markdown content to <strong>avoid being rendered or escaped</strong> by Hugo.</p>
<p>Example <code>raw</code> input:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">Inline Formula: {{<span class="p">&lt;</span> <span class="nt">raw</span> <span class="p">&gt;</span>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">raw</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Block Formula:
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">raw</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">\[ a=b+c \\ d+e=f \]
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">raw</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Raw content using Markdown syntax: {{<span class="p">&lt;</span> <span class="nt">raw</span> <span class="p">&gt;</span>}}**Hello**{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">raw</span> <span class="p">&gt;</span>}}
</span></span></code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>Inline Formula: <data id="id-2" data-raw></data></p>
<p>Block Formula:</p>
<data id="id-3" data-raw></data>
<p>Raw content using Markdown syntax: <data id="id-4" data-raw></data></p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2020-03-03</span>
            </div></div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/en/theme-documentation-extended-shortcodes/index.md" target="_blank">Read Markdown</a>
                        </span></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="Share on Twitter" data-sharer="twitter" data-url="https://example.com/en/theme-documentation-extended-shortcodes/" data-title="Theme Documentation - Extended Shortcodes" data-via="xxxx" data-hashtags="shortcodes"><i class="fab fa-twitter fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on Facebook" data-sharer="facebook" data-url="https://example.com/en/theme-documentation-extended-shortcodes/" data-hashtag="shortcodes"><i class="fab fa-facebook-square fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on Hacker News" data-sharer="hackernews" data-url="https://example.com/en/theme-documentation-extended-shortcodes/" data-title="Theme Documentation - Extended Shortcodes"><i class="fab fa-hacker-news fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on Line" data-sharer="line" data-url="https://example.com/en/theme-documentation-extended-shortcodes/" data-title="Theme Documentation - Extended Shortcodes"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@6.20.0/icons/line.svg" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on 微博" data-sharer="weibo" data-url="https://example.com/en/theme-documentation-extended-shortcodes/" data-title="Theme Documentation - Extended Shortcodes"><i class="fab fa-weibo fa-fw" aria-hidden="true"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw" aria-hidden="true"></i>&nbsp;<a href="/en/tags/shortcodes/">shortcodes</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/en/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/en/basic-markdown-syntax/" class="prev" rel="prev" title="Basic Markdown Syntax"><i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>Basic Markdown Syntax</a>
            <a href="/en/theme-documentation-built-in-shortcodes/" class="next" rel="next" title="Theme Documentation - Built-in Shortcodes">Theme Documentation - Built-in Shortcodes<i class="fas fa-angle-right fa-fw" aria-hidden="true"></i></a></div>
</div>
<div id="comments"><div id="valine" class="comment"></div><noscript>
                Please enable JavaScript to view the comments powered by <a href="https://valine.js.org/">Valine</a>.
            </noscript></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.121.0-DEV">Hugo</a> | Theme - <a href="https://github.com/Fastbyte01/KeepIt" target="_blank" rel="noopener noreffer" title="KeepIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw" aria-hidden="true"></i> KeepIt</a>
                </div><div class="footer-line" itemscope itemtype="http://schema.org/CreativeWork"><i class="far fa-copyright fa-fw" aria-hidden="true"></i><span itemprop="copyrightYear">2019 - 2023</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/en/" target="_blank">xxxx</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw" aria-hidden="true"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw" aria-hidden="true"></i>
            </a>
        </div><link rel="stylesheet" href="/lib/valine/valine.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/css/lightgallery-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/copy-tex.min.css"><link rel="stylesheet" href="/css/2f1ef0.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/valine@1.4.18/dist/Valine.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.38.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.13.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.1/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/lightgallery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/plugins/thumbnail/lg-thumbnail.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/plugins/zoom/lg-zoom.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.5.1/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/auto-render.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/copy-tex.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/mhchem.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":50},"comment":{"valine":{"appId":"QGzwQXOqs5JOhN4RGPOkR2mR-MdYXbMMI","appKey":"WBmoGyJtbqUswvfLh6L8iEBr","avatar":"mp","el":"#valine","emojiCDN":"https://cdn.jsdelivr.net/npm/emoji-datasource-google@14.0.0/img/google/64/","emojiMaps":{"100":"1f4af.png","alien":"1f47d.png","anger":"1f4a2.png","angry":"1f620.png","anguished":"1f627.png","astonished":"1f632.png","black_heart":"1f5a4.png","blue_heart":"1f499.png","blush":"1f60a.png","bomb":"1f4a3.png","boom":"1f4a5.png","broken_heart":"1f494.png","brown_heart":"1f90e.png","clown_face":"1f921.png","cold_face":"1f976.png","cold_sweat":"1f630.png","confounded":"1f616.png","confused":"1f615.png","cry":"1f622.png","crying_cat_face":"1f63f.png","cupid":"1f498.png","dash":"1f4a8.png","disappointed":"1f61e.png","disappointed_relieved":"1f625.png","dizzy":"1f4ab.png","dizzy_face":"1f635.png","drooling_face":"1f924.png","exploding_head":"1f92f.png","expressionless":"1f611.png","face_vomiting":"1f92e.png","face_with_cowboy_hat":"1f920.png","face_with_hand_over_mouth":"1f92d.png","face_with_head_bandage":"1f915.png","face_with_monocle":"1f9d0.png","face_with_raised_eyebrow":"1f928.png","face_with_rolling_eyes":"1f644.png","face_with_symbols_on_mouth":"1f92c.png","face_with_thermometer":"1f912.png","fearful":"1f628.png","flushed":"1f633.png","frowning":"1f626.png","ghost":"1f47b.png","gift_heart":"1f49d.png","green_heart":"1f49a.png","grimacing":"1f62c.png","grin":"1f601.png","grinning":"1f600.png","hankey":"1f4a9.png","hear_no_evil":"1f649.png","heart":"2764-fe0f.png","heart_decoration":"1f49f.png","heart_eyes":"1f60d.png","heart_eyes_cat":"1f63b.png","heartbeat":"1f493.png","heartpulse":"1f497.png","heavy_heart_exclamation_mark_ornament":"2763-fe0f.png","hole":"1f573-fe0f.png","hot_face":"1f975.png","hugging_face":"1f917.png","hushed":"1f62f.png","imp":"1f47f.png","innocent":"1f607.png","japanese_goblin":"1f47a.png","japanese_ogre":"1f479.png","joy":"1f602.png","joy_cat":"1f639.png","kiss":"1f48b.png","kissing":"1f617.png","kissing_cat":"1f63d.png","kissing_closed_eyes":"1f61a.png","kissing_heart":"1f618.png","kissing_smiling_eyes":"1f619.png","laughing":"1f606.png","left_speech_bubble":"1f5e8-fe0f.png","love_letter":"1f48c.png","lying_face":"1f925.png","mask":"1f637.png","money_mouth_face":"1f911.png","nauseated_face":"1f922.png","nerd_face":"1f913.png","neutral_face":"1f610.png","no_mouth":"1f636.png","open_mouth":"1f62e.png","orange_heart":"1f9e1.png","partying_face":"1f973.png","pensive":"1f614.png","persevere":"1f623.png","pleading_face":"1f97a.png","pouting_cat":"1f63e.png","purple_heart":"1f49c.png","rage":"1f621.png","relaxed":"263a-fe0f.png","relieved":"1f60c.png","revolving_hearts":"1f49e.png","right_anger_bubble":"1f5ef-fe0f.png","robot_face":"1f916.png","rolling_on_the_floor_laughing":"1f923.png","scream":"1f631.png","scream_cat":"1f640.png","see_no_evil":"1f648.png","shushing_face":"1f92b.png","skull":"1f480.png","skull_and_crossbones":"2620-fe0f.png","sleeping":"1f634.png","sleepy":"1f62a.png","slightly_frowning_face":"1f641.png","slightly_smiling_face":"1f642.png","smile":"1f604.png","smile_cat":"1f638.png","smiley":"1f603.png","smiley_cat":"1f63a.png","smiling_face_with_3_hearts":"1f970.png","smiling_imp":"1f608.png","smirk":"1f60f.png","smirk_cat":"1f63c.png","sneezing_face":"1f927.png","sob":"1f62d.png","space_invader":"1f47e.png","sparkling_heart":"1f496.png","speak_no_evil":"1f64a.png","speech_balloon":"1f4ac.png","star-struck":"1f929.png","stuck_out_tongue":"1f61b.png","stuck_out_tongue_closed_eyes":"1f61d.png","stuck_out_tongue_winking_eye":"1f61c.png","sunglasses":"1f60e.png","sweat":"1f613.png","sweat_drops":"1f4a6.png","sweat_smile":"1f605.png","thinking_face":"1f914.png","thought_balloon":"1f4ad.png","tired_face":"1f62b.png","triumph":"1f624.png","two_hearts":"1f495.png","unamused":"1f612.png","upside_down_face":"1f643.png","weary":"1f629.png","white_frowning_face":"2639-fe0f.png","white_heart":"1f90d.png","wink":"1f609.png","woozy_face":"1f974.png","worried":"1f61f.png","yawning_face":"1f971.png","yellow_heart":"1f49b.png","yum":"1f60b.png","zany_face":"1f92a.png","zipper_mouth_face":"1f910.png","zzz":"1f4a4.png"},"enableQQ":false,"highlight":true,"lang":"en","pageSize":10,"placeholder":"Your comment ...","recordIP":true,"serverURLs":"https://leancloud.xxxxx.com","visitor":true}},"data":{"id-2":"\\(\\mathbf{E}=\\sum_{i} \\mathbf{E}_{i}=\\mathbf{E}_{1}+\\mathbf{E}_{2}+\\mathbf{E}_{3}+\\cdots\\)","id-3":"\n\\[ a=b+c \\\\ d+e=f \\]\n","id-4":"**Hello**"},"lightgallery":true,"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":true,"left":"\\begin{equation}","right":"\\end{equation}"},{"display":true,"left":"\\begin{equation*}","right":"\\end{equation*}"},{"display":true,"left":"\\begin{align}","right":"\\end{align}"},{"display":true,"left":"\\begin{align*}","right":"\\end{align*}"},{"display":true,"left":"\\begin{alignat}","right":"\\end{alignat}"},{"display":true,"left":"\\begin{alignat*}","right":"\\end{alignat*}"},{"display":true,"left":"\\begin{gather}","right":"\\end{gather}"},{"display":true,"left":"\\begin{CD}","right":"\\end{CD}"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.en","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"No results found","snippetLength":30,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script><script type="text/javascript">console.log('Hello KeepIt!');</script></body>
</html>
